"use client"
// nnn

import { useState } from "react"
import Link from "next/link"
import { ImageIcon, MenuIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

export function Header() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center justify-between px-4 md:px-6">
        {/* 左侧：首页 */}
        <nav className="hidden md:flex flex-1 justify-start">
          <Link href="/" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
            onClick={e => { e.preventDefault(); window.location.href = '/' }}>
            首页
          </Link>
        </nav>
        {/* 中间 logo */}
        <Link href="/" className="flex items-center gap-2 font-bold mx-auto">
          <ImageIcon className="h-6 w-6" />
          <span>照片识别</span>
        </Link>
        {/* 右侧：历史记录 */}
        <nav className="hidden md:flex flex-1 justify-end">
          <a href="#history" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
            历史记录
          </a>
        </nav>
        <Sheet open={isOpen} onOpenChange={setIsOpen}>
          <SheetTrigger asChild className="md:hidden">
            <Button variant="ghost" size="icon">
              <MenuIcon className="h-6 w-6" />
              <span className="sr-only">打开菜单</span>
            </Button>
          </SheetTrigger>
          <SheetContent side="right" className="w-[300px] sm:w-[400px]">
            <nav className="flex flex-col gap-4">
              <Link
                href="/"
                className="text-lg font-medium transition-colors hover:text-foreground"
                onClick={() => setIsOpen(false)}
              >
                首页
              </Link>
              <Link
                href="/"
                className="text-lg font-medium transition-colors hover:text-foreground"
                onClick={() => setIsOpen(false)}
              >
                历史记录
              </Link>
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  )
}
